<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 25px auto;
            border: 1px solid #ffa1a1;
        }

        .box1 {
            background-size: 40px 40px;
            background-position: 0 0, 60px 60px;
            background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 26%, transparent 26%, transparent 74%, #000 74%, #000);
        }

        .box2 {
            background: radial-gradient(100px 100px at 100px 200px, white 0px, white 30px, #f00 30px, #f00 40px, #00f 40px, #00f 50px, #ff0 50px, #ff0 60px, #87ceeb 60px, #87ceeb 70px, #6a5acd 70px, #6a5acd 80px, #008080 80px, #008080 90px, #ff6347 90px, #ff6347 100px, white 100px);
        }

        .box3 {
            border-radius: 50%;
            background: radial-gradient(50px 50px at 50px 100px, black 0px, black 17px, white 17px, white 50px, transparent 50px), radial-gradient(50px 50px at 150px 100px, white 0px, white 17px, black 17px, black 50px, transparent 50px), linear-gradient(white 50%, black 50%);
        }

        .box4 {
            background:
                linear-gradient(to right top,
                    transparent 75%,
                    black 75%) -100px 100px,
                linear-gradient(to right bottom,
                    transparent 75%,
                    black 75%) 0px -100px,
                linear-gradient(to left bottom,
                    transparent 75%,
                    black 75%),
                linear-gradient(to left top,
                    transparent 75%,
                    black 75%) 100px 0px;

            /* background-size: 20% 20%; */
        }
    </style>
</head>

<body>
    <!-- 棋盘 -->
    <div class="box1"></div>


    <!-- 彩虹 -->
    <div class="box2"></div>


    <!-- 太极 -->
    <div class="box3"></div>

    <!-- 棋盘 -->
    <div class="box4"></div>

</body>

</html>